<!--风速风向-->
<script setup>
import * as echarts from "echarts"
import {ref, onMounted, watch} from "vue";

const props = defineProps({
  wind: {
    type: Array,
    default: () => []
  }
})
const windSituation = ref()
//R:弧度=角度/180*Math*PI
// 基于准备好的dom，初始化echarts实例
let data = [
  // [
  //   '2017-01-04 08:00',
  //   6.19,
  //   0.7853
  // ],
  // [
  //   '2017-01-05 08:00',
  //   6.19,
  //   0.2303
  // ],
  // [
  //   '2017-01-06 08:00',
  //   3.19,
  //   0
  // ],
  // [
  //   '2017-01-07 08:00',
  //   6.19,
  //   0
  // ],
  // [
  //   '2017-01-08 08:00',
  //   6.19,
  //   4
  // ],
  // [
  //   '2017-01-09 08:00',
  //   11.19,
  //   2
  // ],
  // [
  //   '2017-01-10 08:00',
  //   17.19,
  //   4.7124
  // ]
];
//数据参数顺序
var dims = {
  time: 0,
  windSpeed: 1,
  R: 2
};
//箭头大小
let arrowSize = 12;

//方向绘制
function renderArrow(param, api) {
  var point = api.coord([
    api.value(dims.time),
    api.value(dims.windSpeed)
  ]);

  return {
    type: 'path',
    shape: {
      pathData: 'M31 16l-15-15v9h-26v12h26v9z',
      x: -arrowSize / 2,
      y: -arrowSize / 2,
      width: arrowSize,
      height: arrowSize
    },
    rotation: api.value(dims.R),
    position: point,
    style: api.style({
      stroke: '#555',
      lineWidth: 1
    })
  };
}

const option = ref({
  title: {
    text: '风速风向分析图',
    textStyle: {
      fontSize: 22,
      fontWeight: 'bold',
    },
    left: 'center',
    top: '1.5%'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      return [
        '时间：' + params[0].value[dims.time],
        '风速：' + params[0].value[dims.windSpeed],
        '风向：' + params[0].value[dims.R]
      ].join('<br>');
    }
  },
  grid: {
    top: 40,
    bottom: 60
  },
  xAxis: {
    type: 'time'
  },
  yAxis: [{
    name: '风速（节）',
    nameLocation: 'middle',
    nameGap: 35,
    axisLine: {
      lineStyle: {
        color: '#666'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#ddd'
      }
    }
  }, {
    axisLine: {show: false},
    axisTick: {show: false},
    axisLabel: {show: false},
    splitLine: {show: false}
  }],
  visualMap: {
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    bottom: 10,
    pieces: [{
      gte: 17,
      color: '#D33C3E',
      label: '大风（>=17节）'
    }, {
      gte: 11,
      lt: 17,
      color: '#f4e9a3',
      label: '中风（11  ~ 17 节）'
    }, {
      lt: 11,
      color: '#18BF12',
      label: '微风（小于 11 节）'
    }],
    seriesIndex: 0,
    dimension: 1
  },
  dataZoom: [{
    type: 'inside',
    xAxisIndex: 0,
    minSpan: 5
  }],
  series: [{
    type: 'custom',
    renderItem: renderArrow,
    encode: {
      x: dims.time,
      y: dims.windSpeed
    },
    data: data,
    z: 10
  },
  {
    type: 'line',
    symbol: 'none',
    encode: {
      x: dims.time,
      y: dims.windSpeed
    },
    lineStyle: {
      normal: {
        color: '#aaa',
        type: 'dotted'
      }
    },
    data: data,
    z: 1
  }]
})
onMounted(() => {
  let myChart = echarts.init(windSituation.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  watch(props, () => {
    option.value.series[0].data=props.wind.map(item=>[item.time,item.windSpeed,item.R])
    option.value.series[1].data=props.wind.map(item=>[item.time,item.windSpeed,item.R])

    myChart.setOption(option.value);
  })
  myChart.setOption(option.value);
  window.addEventListener('resize', myChart.resize);
})
</script>

<template>
  <div class="weather-left3" id="weather-left3" ref="windSituation"></div>

</template>

<style scoped>

</style>
